<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="./element/element.css" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
      :root {
        --animate-delay: 0.4s;
      }
      * {
        margin: 0;
        padding: 0;
        color: aliceblue;
      }
      .outer {
        /* height: 100vh; */
        position: relative;
        width: 100vw;
        height: 100%;
        background-color: #020812;
        overflow: hidden;
        /* text-align: center; */
        /* display: flex;
        justify-content: center; */
      }
      .box {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        overflow: hidden;
        display: flex;
        background-image: url('./assets/one/one-bg.png');
        position: relative;
        background-repeat: no-repeat;
        background-size: contain;
        width: 1920px;
        height: 1080px;
        transform-origin: 0 0;

        transition: all 0.5s ease-out;
        /* height: 100%; */
        /* width: calc(100vh/1080*1920); */
      }
      .action-button {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 100;
      }
      .go-back {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: 50%;
        background-image: url('./assets//three//返回.png');
      }
      .full-screen {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: 50%;
        background-image: url('./assets//three//全屏.png');
      }
      [v-cloak] {
        display: none;
      }
      .left {
        width: 500px;
        /* height: 93.5%; */
        position: absolute;
        left: 0;
        bottom: 20px;
        top: 130px;
        margin-left: 20px;
        order: 1;
        /* transform-origin: 0 0; */
        /* background-image: url('./assets/one/one-left-img.png'); */
        background-repeat: no-repeat;
        /* animation-delay:0.5s */
      }
      .left-base {
        width: 500px;
        height: 198px;
        background-image: url('./assets/one/left1-Bg.png');
        background-repeat: no-repeat;
        position: relative;
      }
      .base-content0 {
        position: absolute;
        left: 202px;
        top: 84px;
        font-size: 20px;
        color: #ffffff;
        line-height: 28px;
      }
      .base-content1 {
        position: absolute;
        left: 31px;
        top: 8px;
      }
      .base-content2 {
        position: absolute;
        right: 13px;
        top: 8px;
      }
      .base-content3 {
        position: absolute;
        left: 31px;
        top: 109px;
      }
      .base-content4 {
        position: absolute;
        right: 13px;
        top: 109px;
      }
      .base-content-num {
        font-size: 36px;
        color: #ffffff;
        line-height: 51px;
        font-weight: 600;
      }
      .base-content-text {
        font-size: 18px;
        color: #6ad9ff;
        line-height: 25px;
      }
      .text-right {
        text-align: right;
        margin-right: 14px;
      }
      .left-business {
        margin-top: 18px;
        width: 500px;
        height: 280px;
        background: linear-gradient(268deg, rgba(4, 22, 50, 0.31) 0%, rgba(10, 47, 92, 0) 100%);
      }
      .right-business {
        margin-top: 18px;
        width: 500px;
        /* height: 280px; */
        background: linear-gradient(268deg, rgba(4, 22, 50, 0.31) 0%, rgba(10, 47, 92, 0) 100%);
      }
      .business-top {
        width: 500px;
        height: 42px;
        background-image: url('./assets/one/top-title.png');
        background-repeat: no-repeat;
      }
      .business-top-text {
        margin-left: 81px;
        font-size: 16px;
        line-height: 42px;
        color: #6ad9ff;
      }
      .business-container {
        height: 238px;
        width: 500px;
        position: relative;
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
      }
      /* .business-now {
      position: absolute;
      top: 30px;
      right: 38px;
    } */
      .business-total {
        position: absolute;
        top: 24px;
        left: 2px;
        font-size: 16px;
        line-height: 22px;
        color: #6ad9ff;
        font-weight: 400;
      }
      .business-process {
        position: absolute;
        top: 67px;
        left: 2px;
        width: 505px;
      }
      .right-business-container {
        padding: 0 0 20px 0;
      }
      .right-business-item {
        display: flex;
        margin-top: 15px;
      }
      .right-business-process {
        width: 300px;
      }
      .right-text {
      }
      .right-pie {
        display: flex;
        justify-content: space-around;
      }
      .pie-left-info {
        align-self: center;
      }
      .left-info-item {
        display: flex;
        align-items: center;
        margin-top: 21px;
      }
      .left-info-item:first-child {
        margin-top: 0;
      }
      .bgc-black {
        width: 14px;
        height: 14px;
        background: #00bd7e;
        border-radius: 2px;
        margin-right: 10px;
      }
      .pie-right-chart {
        width: 40%;
        height: 200px;
      }
      .app-store-item {
        display: inline-flex;
        width: 48%;
        margin-top: 15px;
      }
      .left-app-icon {
        width: 68px;
        height: 75px;
        margin-right: 20px;
      }
      .right-info {
        align-self: center;
      }
      .right-info .title {
        font-size: 28px;
      }
      .right-info .app-text {
        font-size: 16px;
        color: #6ad9ff;
      }
      .progress-green .el-progress-bar__outer {
        background-color: #d8d8d813 !important;
      }
      .progress-green .el-progress-bar__inner {
        background-image: linear-gradient(90deg, #30a06e 0%, #64cb02 100%);
      }
      .progress-green .el-progress__text {
        display: none;
      }
      .buisness-bottom {
        position: absolute;
        top: 104px;
        display: flex;
      }
      .buisness-bottom-left {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .buisness-bottom-left {
        margin-left: 10px;
      }
      .business-data {
        height: 90px;
        width: 90px;
        background-image: url('./assets/one/circle-data.png');
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .business-data-num {
        margin-top: 24px;
        font-size: 20px;
        line-height: 34px;
      }
      .business-data-text {
        font-size: 12px;
        line-height: 17px;
      }
      .buisness-bottom-center {
        margin-left: 75px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .buisness-bottom-right {
        margin-left: 75px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .buisness-bottom-text {
        margin-top: 12px;
      }
      .el-progress-circle {
        width: 90px !important;
        height: 90px !important;
      }
      .el-progress-circle__track {
        stroke: #d8d8d813 !important;
      }
      .el-progress--circle .el-progress__text {
        font-size: 24px !important;
        color: #ffffff !important;
      }
      .left-production {
        margin-top: 18px;
        width: 500px;
        height: 208px;
        background: linear-gradient(268deg, rgba(4, 22, 50, 0.31) 0%, rgba(10, 47, 92, 0) 100%);
      }
      .production-bottom {
        display: flex;
      }
      .production-con {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 24px 0 0 22px;
      }
      .production-con-num {
        color: #66d3fe;
        font-size: 32px;
        line-height: 38px;
      }
      .production-con-img {
        width: 120px;
        height: 62px;
        background-image: url('./assets/one/production.png');
      }
      .production-con-text {
        margin-top: 10px;
        font-size: 16px;
        line-height: 22px;
      }
      .left-count {
        margin-top: 15px;
        width: 500px;
        height: 193px;
        background: linear-gradient(268deg, rgba(4, 22, 50, 0.31) 0%, rgba(10, 47, 92, 0) 100%);
      }
      .count-bottom {
        height: 151px;
      }
      .count-total {
        margin: 9px 0 0 9px;
        line-height: 22px;
        color: #ffffff;
      }
      .count-container {
        margin-top: 10px;
        height: 110px;
        display: flex;
      }
      .count-left {
        margin-left: 50px;
        width: 76px;
      }
      .count-img1 {
        width: 76px;
        height: 76px;
        background-image: url('./assets/one/count-left.png');
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .count-center {
        margin-left: 78px;
        width: 76px;
      }
      .count-img2 {
        width: 76px;
        height: 76px;
        background-image: url('./assets/one/count-center.png');
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .count-right {
        margin-left: 78px;
        width: 76px;
      }
      .count-img3 {
        width: 76px;
        height: 76px;
        background-image: url('./assets/one/count-right.png');
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .count-num {
        font-size: 31px;
        line-height: 44px;
        font-weight: 500;
      }
      .count-text {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        color: #6ad9ff;
        line-height: 20px;
        font-weight: 400;
      }
      .progress-blue .el-progress-bar__outer {
        background-color: #004077 !important;
      }
      .progress-blue .el-progress-bar__inner {
        background-image: linear-gradient(90deg, #006df0 0%, #00c7ff 100%);
      }
      .progress-blue .el-progress__text {
        display: none;
      }
      .center {
        flex: 1;
        order: 2;

        position: relative;
        left: 50%;
        /* top: 50%; */
        transform: translate(-50%, 0);
        transform-origin: 0 0;
      }
      .right {
        width: 500px;
        /* height: 100%; */

        position: absolute;
        right: 0;
        bottom: 20px;
        top: 130px;

        margin-right: 20px;
        order: 3;
        /* height: 93.5%; */
        /* bottom: 0.5%; */
        transform-origin: top;
        /* background-image: url('./assets/one/one-right-img.png'); */
        /* background-repeat: no-repeat;
        position: relative; */
      }
      .time {
        width: 100%;
        text-align: center;
        position: absolute;
        top: -32px;
        font-size: 18px;
      }
      /*中间区域样式*/
      .container {
        width: 100px;
        height: 100px;
      }
      .liquidArea {
        display: flex;
        justify-content: space-around;
      }
      .liquid {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .liquidTitle {
        font-size: 16px;
        color: #fff;
      }
      .bottomTitle {
        font-size: 20px;
        color: transparent;
        width: 100%;
        margin-bottom: 12px;
        text-align: center;
        background-image: linear-gradient(80deg, #1789fb, #fff);
        -webkit-background-clip: text;
      }
      .bottom {
        position: absolute;
        /* bottom: 10%; */
        bottom: 20px;
        left: 570px;
        right: 570px;
      }
      .top {
        /* position: absolute; */
        /* top: 130px;
    left: 575px;
    right: 520px; */
        text-align: center;
        background: url('./assets/one/number.png');
        width: 772px;
        height: 72px;
        margin: 0 auto;
      }
      .topText {
        position: relative;
        color: rgb(144, 196, 252);
      }
      .topTotal {
        font-size: 20px;
        position: absolute;
        left: 175px;
        line-height: 72px;
        color: rgb(144, 196, 252);
      }
      .topNumber {
        letter-spacing: 29px;
        position: absolute;
        /* left: 275px; */
        right: 165px;
        font-size: 30px;
        font-weight: 800;
        line-height: 72px;
        color: rgb(144, 196, 252);
      }
      .topUnit {
        position: absolute;
        top: 35px;
        font-size: 21px;
        left: 593px;
        color: rgb(144, 196, 252);
      }
      .center-map {
        position: absolute;
        top: 148px;
        left: 510px;
        right: 520px;
      }
      #center-map {
        width: 900px;
        height: 750px;
        margin: 0 auto;
      }
      /*中间区域*/
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box" id="app">
        <div class="action-button">
          <span class="go-back"></span>
          <span class="full-screen"></span>
        </div>
        <div class="left animate__animated animate__delay-1s animate__bounceInLeft">
          <div class="left-base">
            <div class="base-content0">IT基础资源</div>
            <div class="base-content1">
              <div class="base-content-num">2</div>
              <div class="base-content-text">机房（个）</div>
            </div>
            <div class="base-content2">
              <div class="base-content-num text-right">8</div>
              <div class="base-content-text">服务器（台）</div>
            </div>
            <div class="base-content3">
              <div class="base-content-num">20</div>
              <div class="base-content-text">存储数据（T）</div>
            </div>
            <div class="base-content4">
              <div class="base-content-num text-right">1024</div>
              <div class="base-content-text">内存资源（GB）</div>
            </div>
          </div>
          <div class="left-business">
            <div class="business-top">
              <div class="business-top-text">企业专题库</div>
            </div>
            <div class="business-container">
              <div class="business-total">已填报企业：{{ enterpriseCount }} 个</div>
              <!-- <div class="business-now">认证证书344万</div> -->
              <div class="business-process">
                <el-progress :percentage="50" :stroke-width="15" class="progress-green"></el-progress>
              </div>
              <div class="buisness-bottom">
                <div class="buisness-bottom-left">
                  <div class="business-data">
                    <div class="business-data-num">386万</div>
                    <div class="business-data-text">条</div>
                  </div>
                  <div class="buisness-bottom-text">数据记录总数</div>
                </div>
                <div class="buisness-bottom-center">
                  <el-progress type="circle" color="#30B486" :percentage="40"></el-progress>
                  <div class="buisness-bottom-text">数据完备度</div>
                </div>
                <div class="buisness-bottom-right">
                  <el-progress type="circle" color="#B45630" :percentage="2"></el-progress>
                  <div class="buisness-bottom-text">数据异常度</div>
                </div>
              </div>
            </div>
          </div>
          <div class="left-production">
            <div class="business-top">
              <div class="business-top-text">产品专题库</div>
            </div>
            <div class="production-bottom">
              <div class="production-con">
                <div class="production-con-num">42018</div>
                <div class="production-con-img"></div>
                <div class="production-con-text">产品数量(个)</div>
              </div>
              <div class="production-con">
                <div class="production-con-num">5732</div>
                <div class="production-con-img"></div>
                <div class="production-con-text">认证证书(个)</div>
              </div>
              <div class="production-con">
                <div class="production-con-num">{{ productComputation }}</div>
                <div class="production-con-img"></div>
                <div class="production-con-text">碳足迹数量(个)</div>
              </div>
            </div>
          </div>
          <div class="left-count">
            <div class="business-top">
              <div class="business-top-text">计算因子主题库</div>
            </div>
            <div class="count-bottom">
              <div class="count-total">计算因子共计：70226个</div>
              <div class="count-container">
                <div class="count-left">
                  <div class="count-img1">
                    <div class="count-num">1</div>
                  </div>
                  <div class="count-text">铸造</div>
                </div>
                <div class="count-center">
                  <div class="count-img2">
                    <div class="count-num">2</div>
                  </div>
                  <div class="count-text">复合</div>
                </div>
                <div class="count-right">
                  <div class="count-img3">
                    <div class="count-num">3</div>
                  </div>
                  <div class="count-text">合金</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center">
          <div style="position: absolute; top: 130px; left: 575px; right: 520px">
            <div class="top">
              <div class="topText">
                <span class="topTotal">企业总数:</span>
                <span class="topNumber" id="num1"></span>
                <span class="topUnit">个</span>
              </div>
            </div>
          </div>
          <div class="center-map">
            <div id="center-map"></div>
          </div>
          <div class="bottom">
            <div class="bottomTitle">>> 主题库数据 <<</div>
            <div class="liquidArea">
              <div class="liquid">
                <div id="container0" class="container"></div>
                <span class="liquidTitle">服务生产线</span>
              </div>
              <div class="liquid">
                <div id="container1" class="container"></div>
                <span class="liquidTitle">区域平台</span>
              </div>
              <div class="liquid">
                <div id="container2" class="container"></div>
                <span class="liquidTitle">碳计算因子</span>
              </div>
              <div class="liquid">
                <div id="container3" class="container"></div>
                <span class="liquidTitle">计算模型</span>
              </div>
              <div class="liquid">
                <div id="container4" class="container"></div>
                <span class="liquidTitle">企业数量</span>
              </div>
              <div class="liquid">
                <div id="container5" class="container"></div>
                <span class="liquidTitle">监测设备数量</span>
              </div>
              <div class="liquid">
                <div id="container6" class="container"></div>
                <span class="liquidTitle">新能源电站</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right animate__animated animate__delay-1s animate__bounceInRight">
          <div class="time"></div>
          <div class="right-business" style="margin-top: 0">
            <div class="business-top">
              <div class="business-top-text">企业专题库</div>
            </div>
            <div class="right-business-container">
              <div class="right-business-item">
                <div class="right-business-process">
                  <el-progress :percentage="1" :stroke-width="15" class="progress-green"></el-progress>
                </div>
                <div class="right-text">产学研用单位数：56家</div>
              </div>
              <div class="right-business-item">
                <div class="right-business-process">
                  <el-progress :percentage="94" :stroke-width="15" class="progress-green"></el-progress>
                </div>
                <div class="right-text">技术资料数：5642篇</div>
              </div>
              <div class="right-business-item">
                <div class="right-business-process">
                  <el-progress :percentage="7" :stroke-width="15" class="progress-green"></el-progress>
                </div>
                <div class="right-text">技术服务数量：457次</div>
              </div>
            </div>
          </div>

          <div class="right-business">
            <div class="business-top">
              <div class="business-top-text">认证证书专题库</div>
            </div>
            <div class="right-business-container">
              <div class="right-business-item">
                <div class="right-business-process">
                  <el-progress :percentage="22" :stroke-width="15" class="progress-blue"></el-progress>
                </div>
                <div class="right-text">产品碳足迹认证：5732次</div>
              </div>
              <div class="right-business-item">
                <div class="right-business-process">
                  <el-progress :percentage="98" :stroke-width="15" class="progress-blue"></el-progress>
                </div>
                <div class="right-text">碳盘查认证次数：8013次</div>
              </div>
              <div class="right-business-item">
                <div class="right-business-process">
                  <el-progress :percentage="2.2" :stroke-width="15" class="progress-blue"></el-progress>
                </div>
                <div class="right-text">低碳产品认证次数：897次</div>
              </div>
              <div class="right-business-item">
                <div class="right-business-process">
                  <el-progress :percentage="2.1" :stroke-width="15" class="progress-blue"></el-progress>
                </div>
                <div class="right-text">碳中和认证次数：872次</div>
              </div>
            </div>
          </div>

          <div class="right-business">
            <div class="business-top">
              <div class="business-top-text">政策咨询专题库</div>
            </div>
            <div class="right-pie">
              <div class="pie-left-info">
                <div class="left-info-item">
                  <span class="bgc-black" style="background-color: #d8693c"></span>
                  <div class="item-text">国家碳政策：4521篇</div>
                </div>
                <div class="left-info-item">
                  <span class="bgc-black" style="background-color: #4073fa"></span>
                  <div class="item-text">国内碳资讯：78638篇</div>
                </div>
                <div class="left-info-item">
                  <span class="bgc-black" style="background-color: #00c4e1"></span>
                  <div class="item-text">国际碳资讯：32391篇</div>
                </div>
              </div>
              <div class="pie-right-chart"></div>
            </div>
          </div>

          <div class="right-business">
            <div class="business-top">
              <div class="business-top-text">工业碳APP应用商店</div>
            </div>
            <div class="app-store-item">
              <div class="left-app-icon" style="background-image: url('./assets//three//APP数量.png')"></div>
              <div class="right-info">
                <div class="title">86</div>
                <div class="app-text">APP数量(个)</div>
              </div>
            </div>
            <div class="app-store-item">
              <div class="left-app-icon" style="background-image: url('./assets//three//应用类型.png')"></div>
              <div class="right-info">
                <div class="title">16</div>
                <div class="app-text">应用类型(种)</div>
              </div>
            </div>
            <div class="app-store-item">
              <div class="left-app-icon" style="background-image: url('./assets//three//用户数.png')"></div>
              <div class="right-info">
                <div class="title">98372</div>
                <div class="app-text">用户数量(人)</div>
              </div>
            </div>
            <div class="app-store-item">
              <div class="left-app-icon" style="background-image: url('./assets//three//用户评论数.png')"></div>
              <div class="right-info">
                <div class="title">48291</div>
                <div class="app-text">用户评论数(次)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="./countUp.min.js"></script>
    <script type="text/javascript" src="./echart3.8.5.js"></script>
    <script type="text/javascript" src="./echarts-liquidfill.js"></script>
    <script type="text/javascript" src="./element/vue.js"></script>
    <script type="text/javascript" src="./element/element.js"></script>
    <script type="text/javascript" src="./mapData/chinaMap.json"></script>
    <script type="text/javascript">
      var rtime;
      var timeout = false;
      var delta = 200;
      window.onload = () => {
        resize();
      };

      function resize() {
        const height = window.outerHeight;
        const app = document.getElementById('app');
        const right = document.querySelector('.right');
        const left = document.querySelector('.left');
        const outer = document.querySelector('.outer');
        const center = document.querySelector('.center');

        const heightPrecent = window.innerHeight / 1080;
        const widthPrecent = window.innerWidth / 1920;
        app.style.scale = heightPrecent < widthPrecent ? heightPrecent : widthPrecent;
      }

      function resizeend() {
        if (new Date() - rtime < delta) {
          setTimeout(resizeend, delta);
        } else {
          timeout = false;
          resize();
        }
      }

      window.addEventListener('resize', (event) => {
        rtime = new Date();
        if (timeout === false) {
          timeout = true;
          setTimeout(resizeend, delta);
        }
      });
      new Vue({
        el: '#app',
        data: function () {
          return {
            enterpriseCount: null,
            productComputation: null,
          };
        },
        mounted() {
          this.getBottomData();
        },
        methods: {
          getBottomData() {
            const apiUrl = window.location.origin;
            // const url = apiUrl + '/iotapi/cx/internet/counter/getNumber';
            const url = 'https://cx.dev.irs101.cn/dev/regional-node/rdca/rdca-server/cx/internet/counter/getNumber';
            try {
              fetch(url, {}).then((res) => {
                let result = res.json();
                result.then((response) => {
                  const data = response.data;
                  this.enterpriseCount = data.enterpriseCount;
                  this.productComputation = data.productComputation;
                  initChart('container4', `${this.enterpriseCount}个`);
                  // 创建渲染数字DOM元素
                  var NumberOptions = (options = {
                    useEasing: true, // 使用缓和
                    useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
                    separator: '', // 分隔器(千位分隔符,默认为',')
                    decimal: '.', // 十进制(小数点符号,默认为 '.')
                    prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
                    suffix: '', // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等)
                  });
                  new CountUp('num1', 0, this.enterpriseCount, 0, 3, NumberOptions).start();
                });
              });
            } finally {
              return;
            }
          },
        },
      });
      function initChart(id, text) {
        let dom = document.getElementById(id);
        let myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false,
        });
        let option = {
          zoom: false,
          title: {
            text: '',
          },
          backgroundColor: 'transparent',
          series: [
            {
              type: 'liquidFill',
              radius: '90%',
              // color: ['#195ba6'],
              color: ['#0351cd'],
              center: ['50%', '50%'],
              data: [0.4544, 0.4544],
              backgroundStyle: {
                borderWidth: 2,
                borderColor: '#1789fb',
                color: '#09255b',
              },
              label: {
                normal: {
                  formatter: text,
                  textStyle: {
                    color: '#fff',
                    fontSize: 16,
                    fontWeight: 400,
                  },
                },
              },
              outline: {
                itemStyle: {
                  borderWidth: 5,
                  borderColor: '#1789fb',
                  borderType: 'dashed',
                },
              },
            },
          ],
        };
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
      }
      initChart('container0', '209条');
      initChart('container1', '1个');
      initChart('container2', '7.02万');
      initChart('container3', '1.27万');
      initChart('container5', '73.9万');
      initChart('container6', '328座');

      function initMap() {
        let dom = document.getElementById('center-map');
        let myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false,
        });
        echarts.registerMap('china', chinaMap);
        let option = {
          geo: {
            show: true,
            map: 'china',
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#AAC1E2',
                    },
                    {
                      offset: 0.33,
                      color: '#436AAA',
                    },
                    {
                      offset: 0.66,
                      color: '#2A57A8',
                    },
                    {
                      offset: 1,
                      color: '#143167',
                    },
                  ],
                  globalCoord: false,
                },
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#AAC1E2',
                    },
                    {
                      offset: 0.33,
                      color: '#436AAA',
                    },
                    {
                      offset: 0.66,
                      color: '#2A57A8',
                    },
                    {
                      offset: 1,
                      color: '#143167',
                    },
                  ],
                },
              },
            },
          },
          series: [
            {
              name: '',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: function (value) {
                return value[2] / 5;
              },
              zlevel: 6,
              legendHoverLink: true,
              showEffectOn: 'render',
              rippleEffect: {
                scale: 6,
                color: function (value) {
                  return value.value[3];
                },
                brushType: 'fill',
              },
              tooltip: {
                show: true,
                backgroundColor: 'rgba(0,0,0,.6)',
                borderColor: 'rgba(147, 235, 248, .8)',
                textStyle: {
                  color: '#FFF',
                },
              },
              label: {
                normal: {
                  show: false,
                  formatter: '{b}',
                  fontSize: 12,
                  offset: [0, 2],
                  position: 'bottom',
                  textBorderColor: '#fff',
                  textShadowColor: '#000',
                  textShadowBlur: 10,
                  textBorderWidth: 0,
                  color: '#ffffff',
                },
              },
              itemStyle: {
                normal: {
                  color: function (value) {
                    return value.value[3];
                  },
                },
                color: '#50E3C2',
                borderColor: 'rgba(225,255,255,2)',
                borderWidth: 4,
                shadowColor: '#E1FFFF',
                shadowBlur: 10,
              },
              data: [
                {
                  name: '国家碳排放基础数据库',
                  value: [116.405285, 39.904989, 40, '#FF3300'],
                },
                {
                  name: '辽宁分院',
                  value: [123.429096, 41.796767, 50, '#50E3C2'],
                },
                {
                  name: '山东分院',
                  value: [117.000923, 35.675807, 44, '#50E3C2'],
                },
                {
                  name: '江苏分院',
                  value: [120.767413, 32.041544, 60, '#50E3C2'],
                },
                {
                  name: '安徽分院',
                  value: [112.982279, 34.96119, 40, '#50E3C2'],
                },
                {
                  name: '重庆分院',
                  value: [106.504962, 29.533155, 50, '#50E3C2'],
                },
                {
                  name: '福建分院',
                  value: [119.306239, 26.075302, 48, '#50E3C2'],
                },
                {
                  name: '广东分院',
                  value: [113.280637, 23.125178, 54, '#50E3C2'],
                },
                {
                  name: '内蒙古分院',
                  value: [111.670801, 41.818311, 34, '#50E3C2'],
                },
                {
                  name: '青海分院',
                  value: [101.778916, 36.623178, 40, '#50E3C2'],
                },
              ],
              encode: {
                value: 2,
              },
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              // effect: {
              //     show: true,
              //     period: 4, //箭头指向速度，值越小速度越快
              //     trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
              //     symbol: 'arrow', //箭头图标
              //     symbolSize: 10, //图标大小
              //     color: '#50E3C2', // 图标颜色
              //   },
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.6,
                  orient: 'horizontal',
                  color: '#50E3C2',
                },
              },
              show: true,
              data: [
                {
                  fromname: '内蒙古分院',
                  toname: '国家碳排放基础数据库',
                  coords: [
                    [111.670801, 41.818311],
                    [116.405285, 39.904989],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.5,
                  orient: 'horizontal',
                  color: '#50E3C2',
                },
              },
              show: true,
              data: [
                {
                  fromname: '青海分院',
                  toname: '国家碳排放基础数据库',
                  coords: [
                    [101.778916, 36.623178],
                    [116.405285, 39.904989],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.7,
                  orient: 'horizontal',
                  color: '#50E3C2',
                },
              },
              show: true,
              data: [
                {
                  fromname: '国家碳排放基础数据库',
                  toname: '辽宁分院',
                  coords: [
                    [116.405285, 39.904989],
                    [123.429096, 41.796767],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.3,
                  orient: 'horizontal',
                  color: '#5AE510',
                },
              },
              show: true,
              data: [
                {
                  fromname: '国家碳排放基础数据库',
                  toname: '江苏分院',
                  coords: [
                    [116.405285, 39.904989],
                    [120.767413, 32.041544],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'dashed',
                  width: 2,
                  opacity: 1,
                  curveness: 0.7,
                  orient: 'horizontal',
                  color: '#5AE510',
                },
              },
              show: true,
              data: [
                {
                  toname: '国家碳排放基础数据库',
                  fromname: '山东分院',
                  coords: [
                    [117.000923, 35.675807],
                    [116.405285, 39.904989],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'dashed',
                  width: 2,
                  opacity: 1,
                  curveness: 0.3,
                  orient: 'horizontal',
                  color: '#5AE510',
                },
              },
              show: true,
              data: [
                {
                  toname: '国家碳排放基础数据库',
                  fromname: '安徽分院',
                  coords: [
                    [112.982279, 34.96119],
                    [116.405285, 39.904989],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.6,
                  orient: 'horizontal',
                  color: '#50E3C2',
                },
              },
              show: true,
              data: [
                {
                  toname: '国家碳排放基础数据库',
                  fromname: '重庆分院',
                  coords: [
                    [106.504962, 29.533155],
                    [116.405285, 39.904989],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.5,
                  orient: 'horizontal',
                  color: '#50E3C2',
                },
              },
              show: true,
              data: [
                {
                  toname: '福建分院',
                  fromname: '国家碳排放基础数据库',
                  coords: [
                    [116.405285, 39.904989],
                    [119.306239, 26.075302],
                  ],
                },
              ],
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.5,
                  orient: 'horizontal',
                  color: '#50E3C2',
                },
              },
              show: true,
              data: [
                {
                  fromname: '广东分院',
                  toname: '国家碳排放基础数据库',
                  coords: [
                    [113.280637, 23.125178],
                    [116.405285, 39.904989],
                  ],
                },
              ],
            },
            {
              name: '区域',
              type: 'map',
              map: 'china',
              data: [],
              geoIndex: 0,
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              roam: false,
              itemStyle: {
                borderColor: '#143167',
                borderWidth: 1,
                shadowColor: '#436AAA',
                shadowOffsetX: 2,
                shadowOffsetY: 4,
                shadowBlur: 8,
                normal: {
                  emphasis: {
                    show: false,
                  },
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      }
      initMap();

      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      function zero(params) {
        if (params >= 10) {
          return params;
        } else {
          return `0${params}`;
        }
      }
      setInterval(() => {
        const curDate = new Date();
        let timeEle = document.querySelector('.time');
        timeEle.innerHTML = `${curDate.getFullYear()}年 ${zero(curDate.getMonth() + 1)}月${curDate.getDate()}日 ${
          weekDays[curDate.getDay()]
        } ${zero(curDate.getHours())}:${zero(curDate.getMinutes())}:${zero(curDate.getSeconds())}`;
      }, 1000);

      var chartDom = document.querySelector('.pie-right-chart');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                color: function (colors) {
                  var colorList = ['#D8693C', '#4073FA', '#00C4E1'];
                  return colorList[colors.dataIndex];
                },
              },
            },
            data: [
              { value: 4521, name: '国家政策' },
              { value: 78638, name: '国内碳资讯' },
              { value: 32391, name: '国际碳资讯' },
            ],
          },
        ],
      };

      option && myChart.setOption(option);

      const fullScreen = document.querySelector('.full-screen');
      fullScreen.onclick = function fullScreen() {
        if (document.documentElement.RequestFullScreen) {
          document.documentElement.RequestFullScreen();
        }
        //兼容火狐
        console.log(document.documentElement.mozRequestFullScreen);
        if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        }
        //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
        if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen();
        }
        //兼容IE,只能写msRequestFullscreen
        if (document.documentElement.msRequestFullscreen) {
          document.documentElement.msRequestFullscreen();
        }
        noFullScreen();
      };
      function noFullScreen() {
        if (document.exitFullScreen) {
          document.exitFullscreen();
        }
        //兼容火狐
        console.log(document.mozExitFullScreen);
        if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        //兼容谷歌等
        if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
        //兼容IE
        if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }

      const goBack = document.querySelector('.go-back');
      goBack.onclick = function () {
        window.location.href = 'http://cx.dev.irs101.cn/dev/regional-node/rdca#/';
      };
    </script>
  </body>
</html>
